<template>
  <div class="main">
    <div class="userInfo-div">
      <img style="width: 40px;height: 40px;border-radius: 50%;margin-left: 3px;margin-top: 5px;"
           src="../../images/defaultAtor.jpeg">
      <div style="padding-left: 5px;padding-top: 5px;">
        <div>{{ userName }}</div>
        <div style="margin-top: 3px;">
          <span style="margin-left: 4px;"><van-icon name="checked" color="green"/></span>
          <span style="margin-left: 4px;"><van-icon name="chat-o" color="green"/></span>
          <span style="margin-left: 4px;"><van-icon name="wechat" color="green"/></span>
          <span style="margin-left: 4px;"><van-icon name="vip-card" color="red"/></span>
        </div>
      </div>
    </div>
    <div style="background-color: aqua;">
      <van-grid :column-num="3">
        <van-grid-item>
                    <span
                        style="margin-bottom: 8px;font-size: var(--van-grid-item-text-font-size);line-height: 1.5;">
                        {{ balance }} &nbsp;&nbsp; RMB</span>
          <van-button type="success" size="small" @click="chargeMoney()">充&nbsp;&nbsp;值</van-button>
        </van-grid-item>
        <van-grid-item>
                    <span
                        style="margin-bottom: 8px;font-size: var(--van-grid-item-text-font-size);line-height: 1.5;">&nbsp;&nbsp;
                        {{ userPoint }}</span>
          <van-button type="success" size="small" @click="chargeMoneys()">积分</van-button>
        </van-grid-item>
        <van-grid-item>
                    <span
                        style="margin-bottom: 8px;font-size: var(--van-grid-item-text-font-size);line-height: 1.5;">&nbsp;&nbsp;
                        {{ yhj }}</span>
          <van-button type="success" size="small" v-on:click="myCouponList()">优&nbsp;惠&nbsp;券</van-button>
        </van-grid-item>
      </van-grid>
    </div>

    <van-grid>

      <van-grid-item icon="balance-o" icon-color="red" text="我的收益" @click="income()"/>
      <van-grid-item icon="orders-o" icon-color="red" @click="myChargingOrderPage()" text="我的充电"/>
      <van-grid-item icon="cluster" icon-color="red" text="我的邀请" @click="myInviteList()"/>
      <van-grid-item icon="point-gift" icon-color="red" text="我的礼券" @click="myCouponList()"/>
    </van-grid>
    <van-grid>
      <van-grid-item icon="refund-o" icon-color="red" @click="myPayOrderPage()" text="我的支付"/>
      <van-grid-item icon="points" icon-color="red" text="我的积分" @click="chargeMoneys()"/>
      <van-grid-item icon="bulb-o" icon-color="red" text="我的桩站"/>
      <van-grid-item icon="bill-o" icon-color="red" text="我的投资"/>
    </van-grid>
    <van-grid>
      <van-grid-item icon="star-o" icon-color="red" text="我的收藏" @click="shoucang()"/>
      <van-grid-item icon="list-switch" icon-color="red" text="我的汽车" @click="myCarList()"/>
      <van-grid-item icon="friends-o" icon-color="red" text="我的组团"/>
      <van-grid-item icon="phone" icon-color="red" text="我的客服"/>
      <van-grid-item icon="manager-o" icon-color="red" text="个人中心" @click="allUserinfo()"/>
      <van-grid-item icon="warning-o" icon-color="red" text="异常上报" @click="YC"/>
      <van-grid-item icon="envelop-o" icon-color="red" text="站内信" @click="IntraSiteMessage()"/>
      <van-grid-item @click="toDazhuanpan()">
        <svg viewBox="0 0 24 24" width="26" height="26" style="color: #ff4444;">
          <path fill="currentColor"
                d="M14.19,14.19L6,18L9.81,9.81L18,6M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,10.9A1.1,1.1 0 0,0 10.9,12A1.1,1.1 0 0,0 12,13.1A1.1,1.1 0 0,0 13.1,12A1.1,1.1 0 0,0 12,10.9Z"/>
        </svg>
        <span>积分抽奖</span>

      </van-grid-item>
    </van-grid>

  </div>
</template>
<script setup>
import router from '@/router';
import {GetUserInfo} from '@/api/user.js'
import {GetStationListwd} from '@/api/station.js'
import {UserCouponCount, UserPoint} from '@/api/market.js'
import {ref} from 'vue';


var userName = ref('');
var balance = ref(0);
var userCouponCount = ref(0);
var userPoint = ref(0);
var yhj = ref(0);
const userId = ref(null);           // 当前登录用户的 ID

init();

function init() {
  const token = localStorage.getItem("token");
  // 检查 token 是否为空字符串或其他非期望的值
  if (!token || token.trim() === '') { // 使用 trim() 来移除两端的空白字符并检查是否为空字符串
    console.info("token 不存在或为空字符串");
    router.push('/user/login');
  } else {
    getUserInfo();

  }
}


function getUserInfo() {
  GetUserInfo()
      .then(res => {
        if (res.data.code == 200000) {
          console.info(res.data.data.nickName)
          userName.value = res.data.data.nickName
          balance.value = res.data.data.balance
          // getUserCouponCount();
          // getUserPoint();
        } else {
          router.push('/user/login');
        }
      }).catch(error => {
    // 这里捕获GetUserInfo()方法执行过程中发生的任何错误
    console.error('An error occurred:', error);
    // 无论是由于什么错误，都跳转到登录页面
    router.push('/user/login');
  });
  GetUserInfo()
      .then(res => {
        if (res.data.code == 200000) {
          console.info(res.data.data)
          userId.value = res.data.data.id; // 获取用户 ID 并存储
          console.log("登录用户 ID:", userId.value);
          userName.value = res.data.data.nickName
          balance.value = res.data.data.balance
          userPoint.value = res.data.data.point
          yhj.value = res.data.data.yhj
          // getUserCouponCount();
          // getUserPoint();
        } else {
          console.log("")// router.push('/user/login');
        }
      }).catch(error => {
    // 这里捕获GetUserInfo()方法执行过程中发生的任何错误
    console.error('An error occurred:', error);
    // 无论是由于什么错误，都跳转到登录页面
    router.push('/user/login');
  });
}


// function getUserCouponCount() {
//   UserCouponCount()
//       .then(res => {
//         if (res.data.code == 200000) {
//           userCouponCount.value = res.data.data;
//         } else {
//           router.push('/user/login');
//         }
//       })
// }

const userCouponInfList = ref([]);  // 存储可使用的优惠券

function getStationInfo() {
  if (!userId.value) {
    console.error('用户 ID 未获取');
    return;
  }
  GetStationListwd({userId: String(userId.value)})  // 将 userId 转换为字符串
      .then(res => {
        console.log('API 响应数据:', res);
        if (res.data.code === 200000) {
          userCouponInfList.value = res.data.data;  // 可使用
          console.log('获取到的优惠券列表:', userCouponInfList.value);
        } else {
          console.error('获取优惠券列表失败:', res.data.message);
        }
      })
      .catch(err => {
        console.error('获取优惠券列表出错:', err);
      });
}


getStationInfo()

// function getUserPoint() {
//   UserPoint()
//       .then(res => {
//         console.info(res)
//         if (res.data.code == 200000) {
//           userPoint.value = res.data.data;
//         } else {
//           router.push('/user/login');
//         }
//       })
// }

function shoucang() {
  router.push('/user/charge/ChargeCang');
}

function chargeMoneys() {
  router.push('/user/charge/moneys');
}

function chargeMoney() {
  router.push('/user/charge/money');
}

function myInviteList() {
  router.push('/my/invite');
}

function myCouponList() {
  router.push('/my/coupon/index');
}

function myChargingOrderPage() {
  router.push('/user/charging/order');
}

function myPayOrderPage() {
  router.push('/user/pay/order');
}

function income() {
  router.push('/income/myIncome')
}

function allUserinfo() {
  router.push('/mine/UserInfo')
}

// 我的车辆
function myCarList() {
  router.push('/my/car')
}

function YC() {
  router.push('/user/charge/yichang')
}
function toDazhuanpan() {
  router.push('/zhuanpan/dazhuanpan');
}
function IntraSiteMessage() {
  router.push('/intraSite')
}
</script>

<style>
.main {
  margin-top: 8px;
  margin-left: 8px;
  margin-right: 8px;
}

.userInfo-div {
  height: 65px;
  width: auto;
  display: flex;
  padding-top: 8px;
  /* background-color: aquamarine; */
}
</style>